<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.list_title{padding-bottom: 30px;}
</style>

<template>
  <div>

      <template v-if="routerPath=='entrustmanage'" >
        <div v-loading="loading">
          <!--工具条-->
          <el-col :span="24" class="toolbar toolbar_header" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item label="交易市场:">
                <el-select v-model="filters.marketId" filterable placeholder="请选择">
                   <el-option
                    v-for="item in markets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option> 
                
                </el-select>
              </el-form-item>
              <el-form-item label="交易方式:">
                <el-select v-model="filters.type" placeholder="请选择">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="买" value="1"></el-option>
                  <el-option label="卖" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="交易状态:">
                <el-select v-model="filters.status" placeholder="请选择">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="未成交" value="1"></el-option>
                  <el-option label="已成交" value="2"></el-option>
                  <el-option label="已撤单" value="3"></el-option>
                
                </el-select>
              </el-form-item>
           
              <el-form-item label="订单ID:">
                <el-input v-model="filters.orderId" placeholder="订单号"></el-input>
              </el-form-item>              
             
              <el-form-item label="用户名ID:">
                <el-input v-model="filters.userId" placeholder="等值匹配"></el-input>
              </el-form-item>              
              <el-form-item>
                <el-button type="primary" v-on:click="fetchData">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>          
        <!-- table start  -->
        <el-table :data="list" style="width: 100%" max-height="1000">
          <el-table-column width="37">
            <template scope="scope">
              <img src="../assets/img/sysFile.gif">
            </template>
          </el-table-column> 
          <el-table-column label="ID"     type="index"    width="60">
          </el-table-column> 
          <el-table-column prop="userName" label="用户名" >
          </el-table-column>              
          <el-table-column prop="marketTitle" label="交易市场" >
          </el-table-column>
          <el-table-column prop="price" label="交易价格">
          </el-table-column>
          <el-table-column prop="number" label="交易数量" >
          </el-table-column>       
          <el-table-column prop="dealNumber" label="已成交量" >
          </el-table-column>
          <el-table-column prop="fee" label="手续费" >
          </el-table-column>
              
           <el-table-column prop="lockNumber" label="冻结金额" >
          </el-table-column>
          <el-table-column prop="dealStyle" label="交易方式" :formatter="formatStyle">
          </el-table-column>
          <el-table-column prop="userGender" label="状态" :formatter="formatSex">
          </el-table-column>          
          <el-table-column prop="createTime" label="委托时间" >
          </el-table-column>     
          <el-table-column label="操作">
            <template slot-scope="scope">       
              <span class="span_btn"   @click="toggleStatus(scope.$index, scope.row)" >撤单</span>
             
            </template>
          </el-table-column>
       
        </el-table>
          <!--工具条-->
        <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col>
        <!-- table end  -->

      </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as entrustmanage from '../api/entrustmanage';
import * as trademark from '../api/trademark';

let myMixin = {
  data: function() {
    return { entrustmanage }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      filters:{},
      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      addLoading:false,//
      editLoading:false,//
      markets:[{ value: '0', label: '全部'}],

      list: [
        { userName:"test",
          userGender:1,
          dealStyle:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        },
        { userName:"test",
          userGender:2,
          dealStyle:2,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        }
      ],
      canReset: true,
      loading: false,
      groupId:'',//组id
      userId:''//用户id
    }
  },
  methods: {
    toggleStatus:function(row){
      //状态操作
      this.$confirm('确认取消该订单吗?', '提示', {
          type: 'warning'
        }).then(() => {
            let para={
              userId:row.userId,
              orderId:this.orderId,
            }
            entrustmanage.cancel.r(para,(res)=>{
              if(res.retCode==1){
                // this.$message("修改状态成功");
                this.fetchData();
              }else{
                this.$message({
                  message: res.retMsg,
                  type: 'error'
                });
              }
            })
          
        }).catch(() => {

        });
   
    },
   //状态转换
    formatStyle: function (row, column) {
      return row.dealStyle == 1 ? '买' : '卖';
    },
   //状态转换
    formatSex: function (row, column) {
      return row.userGender == 1 ? '已成交' : '未成交';
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

    fetchData(init) {
      this.loading = true;
     /* if(!this.$_has([entrustmanage.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          marketId:this.filters.marketId,
          userId:this.filters.userId,
          type:this.filters.type,
          status:this.filters.status,
        };

      entrustmanage.request.r(para).then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          if(res.data.data){
            this.total=parseInt(res.data.data.totalRow);
            this.list = res.data.data.list;
          }else{
            // this.list=[];
          }
            
        }else{
           this.$message({
              message: res.retMsg,
              type: 'error'
            });
        }
      
      
        this.loading = false;
      });
    },
    fetchDataMarket() {   //获取交易市场列表
       
      trademark.request.r().then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          if(res.data.data.list){
            res.data.data.list.map(x=>{
              this.markets.push({value:x.marketId,label:x.title});
            })
          }
        }else{
            this.$message(res.data.retMsg);

        }      

      });          
   
    },
    requestNotAllowed: function(){
      entrustmanage.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            this.groupId="";
            // this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([entrustmanage.releRolesUser]);
    this.isReleGroup=this.$_has([entrustmanage.releGroupUser]);
    this.isEdit=this.$_has([entrustmanage.modify]);
    this.isDel=this.$_has([entrustmanage.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }
*/
    this.fetchData(true);
    this.fetchDataMarket();
    /*console.log(this.$route.path.split("/").pop())*/
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>